<template>
  <div class="app">
    <template>
      <header class="header">
        <div class="imgItems" @mouseover="stopTime" @mouseout="startTime">
          <transition name="fade">
            <img :src="currentImage.src" alt=""/>
          </transition>

          <div class="imgIndexs">
            <div v-for="(item, index) in imgCount" :key="'indicator-' + index" @mouseover="selectImg(index)"
              :class="{ 'indexBGC': currentIndex === index }"></div>
          </div>
        </div>
      </header>
    </template>

    <template>
  <div class="navigation-bar">
    <div v-for="(item, index) in navItems" :key="index" class="nav-item">
      <a :href="item.link" class="nav-link">
        <i v-if="item.icon" :class="item.icon"></i>
        <span class="nav-text" :style="{ color: item.color }">{{ item.text }}</span>
      </a>
    </div>
  </div>
</template>

    <div class="other">
      <div class="category-menu">
        <!-- 左边显示一半 -->
        <template>
          <ul class="category-list">
            <li v-for="(item, index) in categories" :key="index">
              <!-- el-popover 绑定到 a 标签 -->
              <el-popover placement="top-start" :title="item.title" width="200" trigger="hover" :content="item.tip">
                <a slot="reference" :href="item.href">
                  <i :class="item.icon"></i> {{ item.name }}
                </a>
              </el-popover>
            </li>
          </ul>
        </template>
      </div>
      <div class="tuijian">
        <!-- 右边显示一半 -->
        <div class="image-container">
          <img :src="tuijianImage" alt="推荐图片">
        </div>
      </div>
    </div>

    <main class="main">
  <section class="column-containers">
    <div class="column" v-for="(flower, index) in tableData" :key="index">
      <div class="card" @click="clickflowers(flower.flowerId)">
        <div class="img">
          <img :src="flower.flowerPhoto" :alt="flower.name" />
        </div>
        <div class="text">
          <p>{{ flower.menaning }}</p>
          <p class="price" style="color: red;font-weight:700">￥{{ flower.price }}</p>
        </div>
      </div>
    </div>
  </section>
</main>
  </div>
</template>

<script>
import ActivityImg1 from '@/assets/images/one.jpg'
import ActivityImg3 from '@/assets/images/two.jpg'
import TuijianImg from '@/assets/images/three.jpg'

export default {
  data() {
    return {
      tableData: [], // 修改为数组
      categories: [
        { name: '白玫瑰 / 白百合 / 白雏菊 / 白兰花 / 白菊花 ', href: '/new?color=3-3', icon: 'el-icon-cloudy', tip: '白色花束总体上来说，往往能传达出纯洁、和平、尊重和安慰等积极意义。', title: '白色花束' },
        { name: '黄玫瑰 / 黄百合 / 黄雏菊 / 向日葵 / 黄鸢尾花', href: '/new?color=3-2', icon: 'el-icon-sunny', tip: '总体来说，黄色花束经常能代表喜悦、友谊、乐观和新的开始等正面意义。', title: '黄色花束' },
        { name: '红玫瑰 / 红百合 / 红雏菊 / 红牡丹 / 红绣球花', href: '/new?color=3-1', icon: 'el-icon-apple', tip: '红色花束总体上来说，经常能代表浓烈的情感，如爱情、欲望、热情、尊重和勇气。', title: '红色花束' },
        { name: '玫瑰 / 百合 / 兰花 / 向日葵 / 康乃馨 / 尤加利叶', href: '/new?type=male', icon: 'el-icon-male', tip: '给男生送花束时，选择合适的花卉和颜色非常重要。通常，送给男性的花束应该显得更加简洁、大气，并且符合他们的兴趣和品味。', title: '适宜给男生的花束' },
        { name: '郁金香 / 满天星 / 向日葵 / 洋桔梗 / 绣球花', href: '/new?type=female', icon: 'el-icon-female', tip: '给女生送花束时，选择的花卉和设计应该考虑到女性的细腻情感和个人品味。', title: '适宜给女生的花束' },
        { name: '红玫瑰 / 百合 / 兰花 / 满天星 / 向日葵 / 洋桔梗', href: '/new?type=love', icon: 'el-icon-sugar', tip: '表达爱意的花束是传递深情厚意的理想选择，不同种类和颜色的花卉可以传达出不同的信息。', title: '表达爱意的花束' },
        { name: '玫瑰 / 百合 / 兰花 / 向日葵 / 康乃馨 / 绿植', href: '/new?type=visit', icon: 'el-icon-office-building', tip: '看望他人时选择合适的花束不仅能表达你的关心和祝福，还能为对方带来一份温馨和安慰。', title: '看望他人花束' }
      ],
      images: [
        { src: ActivityImg1 },
        { src: ActivityImg3 }
      ],
      imgCount: 0, //图片个数
      currentIndex: 0, //当前图片
      intervalID: '', //停止interval的唯一id
      navItems: [
        { text: '首页', link: '/', icon: 'el-icon-s-home', color: '#409EFF' },
        { text: '花束定制', link: '/custom', icon: 'el-icon-magic-stick', color: '#67C23A' },
        { text: '鲜花商城', link: '/shop', icon: 'el-icon-shopping-bag-1', color: '#E6A23C' },
        { text: '养护指南', link: '/guide', icon: 'el-icon-notebook-1', color: '#F56C6C' },
        { text: '会员中心', link: '/vip', icon: 'el-icon-user', color: '#909399' }
      ],
      tuijianImage: TuijianImg,
    };
  },
  created() {
    this.load();
  },
  mounted() {
    this.imgCount = this.images.length;
    this.startTime();
  },
  methods: {
    load() {
      this.request.get("/flowers/list").then(res => {
        console.log(res.data);
        this.tableData = res.data;
      });
    },
    clickflowers(id) {
      this.$router.push(`/flowersdetail/${id}`);
    },
    scrollLeft() {
      const containers = document.querySelector('.column-containers');
      containers.scrollBy({
        left: -containers.offsetWidth,
        behavior: 'smooth'
      });
    },
    scrollRight() {
      const containers = document.querySelector('.column-containers');
      containers.scrollBy({
        left: containers.offsetWidth,
        behavior: 'smooth'
      });
    },
    /**
        * 鼠标移动到图片上
        */
    mouseOver() {
      this.stopTime()
    },
    /**
     * 鼠标移出图片
     */
    mouseOut() {
      this.startTime();
    },
    startTime() {
      if (this.intervalID) clearInterval(this.intervalID);
      this.intervalID = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
      }, 4000); // 调整为更长的时间间隔以观察效果
    },
    stopTime() {
      if (this.intervalID) clearInterval(this.intervalID);
    },
    selectImg(index) {
      this.stopTime();
      this.currentIndex = index;
      // 如果需要自动继续播放，可以在选择后重新开始计时
      this.startTime();
    },
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex];
  }
  },
};
</script>

<style scoped>
.app {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 100%;
  height: 100vh;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-left: 15px;
  border-radius: 8px;
  background-color: white;
}

.header {
  background-color: #fff;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  height: 400px;
  border-radius: 8px 8px 0 0;
}

.header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease;
}

.header img:hover {
  transform: scale(1.02);
}

.imgItems {
  position: relative;
  width: 100%;
  height: 400px;
  margin: 0;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.imgIndexs {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  width: auto;
  gap: 8px;
}

.imgIndex {
  width: 8px;
  height: 8px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.indexBGC {
  background-color: #fff;
  border-color: #fff;
  transform: scale(1.2);
}

.navigation-bar {
  margin: 15px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.nav-item {
  position: relative;
  padding: 8px 20px;
  color: #333;
  transition: all 0.3s ease;
}

.nav-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background-color: #e8e8e8;
}

.nav-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #1890ff;
}

.nav-text {
  font-size: 16px;
  font-weight: 500;
}

.other {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin: 15px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.category-menu {
  width: 48%;
  padding: 0;
}

.tuijian {
  width: 48%;
  border-radius: 8px;
  overflow: hidden;
}

.category-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.category-list li {
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.category-list a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.category-list a:hover {
  background-color: #f0f7ff;
  color: #1890ff;
}

.category-list i {
  margin-right: 12px;
  font-size: 18px;
  color: #1890ff;
}

.image-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-container:hover img {
  transform: scale(1.05);
}

.main {
  padding: 20px;
  margin-bottom: 20px;
}

.column-containers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
  width: 100%;
}

.column {
  width: 100%;
}

.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.img {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card:hover .img img {
  transform: scale(1.05);
}

.text {
  padding: 15px;
  text-align: center;
}

.text p {
  margin: 5px 0;
  font-size: 14px;
}

.price {
  font-size: 16px !important;
  font-weight: bold;
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app {
    margin-left: 0;
    border-radius: 0;
  }

  .header,
  .imgItems {
    height: 200px;
}

.navigation-bar {
    flex-wrap: wrap;
    padding: 8px;
}

.nav-item {
    padding: 6px 12px;
  }

  .nav-text {
    font-size: 14px;
  }

  .other {
    flex-direction: column;
    padding: 12px;
  }

  .category-menu,
  .tuijian {
    width: 100%;
  }

  .category-menu {
    margin-bottom: 12px;
  }

  .column-containers {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }

  .img {
    height: 160px;
  }
}
</style>